<script setup>

import {useUserStore} from "@/stores/user.js";
import MapContainer from "@/components/base/MapContainer.vue";
</script>

<template>
  <div class="UC_home">
    <div class="top">

      <el-row  >
        <el-col :span="4">
          <img class="userImg" style="width: 120px;height: 120px" :src="useUserStore().getAvatar" alt="">

        </el-col>
        <el-col :span="18">
          <div class="userName">
            <span style="font-size: 24px;color: #11192d;">{{useUserStore().userInfo.username}}</span>&nbsp
            <el-tag v-show="useUserStore().userInfo.role==='expert'" type="warning">
              <el-icon><Select /></el-icon>
              专家认证
            </el-tag>&nbsp

            <el-tag type="success" v-if="useUserStore().isAuth">已实名</el-tag>
            <el-tag type="info" v-if="!useUserStore().isAuth">未实名</el-tag>
          </div>
          <div class="userId" style="margin-top: 10px">
            <span style="font-size: 14px;color: #7c889c">我的账号 {{useUserStore().userInfo.uid}}</span>
            <span class="authRealName" @click="dialogFormVisible = true" >实名认证</span>
          </div>
        </el-col>
      </el-row>

    </div>


  </div>

  <el-dialog v-model="dialogFormVisible" title="实名认证" width="500" >
    <el-form :model="form"
             :rules="rules"
             v-show="!form.canChange"
             ref="ruleFormRef"
             label-width="auto">
      <el-form-item label="真实姓名" prop="realName">
        <el-input v-model="form.realName" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="身份证号码" prop="identityNum">
        <el-input v-model="form.identityNum" autocomplete="off"/>
      </el-form-item>
    </el-form>

    <el-descriptions
        title="当前实名信息"
        v-show="form.canChange"
        :column="1"
        :size="size"
        border
    >
      <el-descriptions-item label="姓名 " >
        <span style="color:#999;">{{ form.realName }}</span>
      </el-descriptions-item>
      <br>
      <el-descriptions-item label="身份证号">
        <span style="color:#999;">{{ form.identityNum }}</span>
      </el-descriptions-item>
      <br>


    </el-descriptions>

    <template #footer>
      <div class="dialog-footer">

        <template v-if="false">
          <el-button type="danger" @click="form.canChange=false">
            更换实名
          </el-button>
        </template>
        <template v-else-if="!form.canChange">
          <el-button @click="dialogFormVisible = false;form.canChange=false">取消</el-button>
          <el-button type="primary" @click="submitRealName(ruleFormRef)">
            提交
          </el-button>
        </template>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped lang="less">

.UC_home{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  align-content: stretch;
  gap: 20px
}

.el-row {
  margin-bottom: 20px;
}

.el-col div:hover{
  cursor: pointer;
  color: #409EFF;
}

.top{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: 1000px;
  height: 800px;
  background-color: #ebd270;
  border-radius: 10px;

  padding: 0 20px;
}
.express{
  width: 990px;
  min-height: 400px;
  height: auto;
  background-color: white;
  border-radius: 10px;
  padding: 20px 20px;
}
.likes{
  width: 990px;
  height: 500px;
  background-color: white;
  border-radius: 10px;
  padding: 20px 20px;
}

.authRealName{
  float: right;
  font-size: 14px;
  color: #7c889c
}

.authRealName:hover{
  color: #39bf3e;
  cursor:pointer;
}
</style>